@mixin tasklist {
  li.checked > .ql-ui,
  li.unchecked > .ql-ui {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: right;
    margin-left: -26px;
    margin-right: 10px;
    border: 1px solid #adb0b8;
    color: #adb0b8;
    cursor: pointer;
  }

  li.checked > .ql-ui {
    border: 1px solid #5e7ce0;
    background: #5e7ce0
      url('');
    transition: all 0.3s ease-in-out;
  }

  li.checked > .ql-ui::before,
  li.unchecked > .ql-ui::before {
    content: '';
  }

  // 样式重置
  li.checked,
  li.unchecked {
    display: block;
    width: initial;
    height: initial;
    margin-left: initial;
    color: initial;
    border: initial;
    cursor: initial;
  }

  li.checked::before,
  li.unchecked::before {
    content: initial;
  }

  li.checked > .ql-ui,
  li.unchecked > .ql-ui {
    bottom: initial;
  }
}

@mixin tasklistOutside {
  li.checked::before,
  li.unchecked::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: right;
    margin-left: -26px;
    border: 1px solid #adb0b8;
    content: '';
    position: absolute;
    top: 1px;
    margin-right: 0.7em;
  }

  li.checked::before {
    border: 1px solid #5e7ce0;
    background: #5e7ce0
      url('');
  }

  li.checked > .ql-ui,
  li.unchecked > .ql-ui {
    top: 0;
  }
}
